<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>活动专区 - 健身房</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/icons.css">
    <link rel="stylesheet" href="css/mobile-nav.css">
    <link rel="stylesheet" href="css/quick-nav.css">
</head>

<body>
    <header>
        <nav class="main-nav">
            <div class="logo">
                <a href="index.html">十年全勤健身</a>
            </div>
            <ul class="nav-links">
                <li><a href="index.html">首页</a></li>
                <li><a href="courses.html">课程介绍</a></li>
                <li><a href="trainers.html">教练团队</a></li>
                <li><a href="facilities.html">器材设施</a></li>
                <li><a href="news.html">健身资讯</a></li>
                <li><a href="shop.html">在线商城</a></li>
                <li><a href="member.html">会员中心</a></li>
                <li><a href="events.html" class="active">活动专区</a></li>
                <li><a href="about.html">关于我们</a></li>
                <li><a href="contact.html">联系我们</a></li>
            </ul>
        </nav>
    </header>

    <section class="events-hero">
        <div class="events-hero-content">
            <h1>活动专区</h1>
            <p>参与我们的特色活动，开启健康生活新方式</p>
        </div>
    </section>

    <section class="events-list">
        <div class="container">
            <h2>近期活动</h2>
            <div class="events-grid">
                <div class="event-card">
                    <div class="event-image">
                        <img src="assets/imgs/event1.png" alt="健身挑战赛">
                        <div class="event-date">
                            <span class="day">15</span>
                            <span class="month">六月</span>
                        </div>
                    </div>
                    <div class="event-content">
                        <h3>30天健身挑战赛</h3>
                        <p class="event-time"><i class="icon-clock"></i> 09:00 - 18:00</p>
                        <p class="event-location"><i class="icon-location"></i> 主馆</p>
                        <p class="event-description">参与为期30天的健身挑战，赢取丰厚奖品！专业教练全程指导，帮助你达成目标。</p>
                        <a href="#" class="event-button">立即报名</a>
                    </div>
                </div>

                <div class="event-card">
                    <div class="event-image">
                        <img src="assets/imgs/event2.png" alt="瑜伽工作坊">
                        <div class="event-date">
                            <span class="day">20</span>
                            <span class="month">六月</span>
                        </div>
                    </div>
                    <div class="event-content">
                        <h3>夏季瑜伽工作坊</h3>
                        <p class="event-time"><i class="icon-clock"></i> 14:00 - 16:00</p>
                        <p class="event-location"><i class="icon-location"></i> 瑜伽馆</p>
                        <p class="event-description">专业瑜伽导师带来的夏季特别课程，让身心在专业指导下得到全面放松。</p>
                        <a href="#" class="event-button">立即报名</a>
                    </div>
                </div>

                <div class="event-card">
                    <div class="event-image">
                        <img src="assets/imgs/event3.png" alt="营养讲座">
                        <div class="event-date">
                            <span class="day">25</span>
                            <span class="month">六月</span>
                        </div>
                    </div>
                    <div class="event-content">
                        <h3>健康营养讲座</h3>
                        <p class="event-time"><i class="icon-clock"></i> 19:00 - 21:00</p>
                        <p class="event-location"><i class="icon-location"></i> 多功能厅</p>
                        <p class="event-description">营养专家分享科学饮食知识，教你如何通过饮食提升训练效果。</p>
                        <a href="#" class="event-button">立即报名</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer>
        <div class="footer-content">
            <div class="footer-section">
                <h4>联系我们</h4>
                <p>地址：济南市章丘区健身大街88号</p>
                <p>电话：400-XXX-XXXX</p>
                <p>邮箱：info@qiangjian.com</p>
            </div>
            <div class="footer-section">
                <h4>关注我们</h4>
                <div class="social-links">
                    <a href="#" class="social-link">微信</a>
                    <a href="#" class="social-link">微博</a>
                    <a href="#" class="social-link">抖音</a>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2025 十年全勤健身 版权所有</p>
        </div>
    </footer>

    <nav class="quick-nav">
        <ul class="quick-nav-links">
            <li><a href="index.html">首页</a></li>
            <li><a href="courses.html">课程介绍</a></li>
            <li><a href="trainers.html">教练团队</a></li>
            <li><a href="facilities.html">器材设施</a></li>
            <li><a href="news.html">健身资讯</a></li>
            <li><a href="shop.html">在线商城</a></li>
            <li><a href="member.html">会员中心</a></li>
            <li><a href="events.html">活动专区</a></li>
            <li><a href="about.html">关于我们</a></li>
            <li><a href="contact.html">联系我们</a></li>
        </ul>
    </nav>

    <script src="js/mobile-nav.js"></script>
    <script src="js/nav-highlight.js"></script>
    <!-- 报名弹窗 -->
    <div class="signup-modal" id="signupModal">
        <div class="signup-form">
            <button class="close-modal" onclick="closeModal()">&times;</button>
            <h3>活动报名</h3>
            <form id="eventSignupForm" onsubmit="handleSubmit(event)">
                <div class="form-group">
                    <label for="name">姓名</label>
                    <input type="text" id="name" name="name" required>
                </div>
                <div class="form-group">
                    <label for="phone">电话</label>
                    <input type="tel" id="phone" name="phone" required>
                </div>
                <div class="form-group">
                    <label for="email">邮箱</label>
                    <input type="email" id="email" name="email" required>
                </div>
                <button type="submit" class="submit-btn">提交报名</button>
            </form>
        </div>
    </div>

    <script>
        function openModal() {
            document.getElementById('signupModal').classList.add('active');
        }

        function closeModal() {
            document.getElementById('signupModal').classList.remove('active');
        }

        function handleSubmit(event) {
            event.preventDefault();
            // 这里可以添加表单数据处理和提交逻辑
            showSuccessMessage('报名成功！');
            closeModal();
        }

        // 添加成功提示函数
        function showSuccessMessage(message) {
            const successDiv = document.createElement('div');
            successDiv.className = 'success-message';
            successDiv.innerHTML = `
        <div class="success-icon">✓</div>
        <div class="success-text">发送成功：${message}</div>
    `;
            document.body.appendChild(successDiv);

            // 添加显示类名触发动画
            setTimeout(() => successDiv.classList.add('show'), 10);

            // 3秒后移除提示
            setTimeout(() => {
                successDiv.classList.remove('show');
                setTimeout(() => successDiv.remove(), 300);
            }, 3000);
        }

        // 为所有报名按钮添加点击事件
        document.querySelectorAll('.event-button').forEach(button => {
            button.onclick = openModal;
        });

        // 点击遮罩层关闭弹窗
        document.getElementById('signupModal').addEventListener('click', function (e) {
            if (e.target === this) {
                closeModal();
            }
        });
    </script>
</body>

</html>
<style>
    /* 报名弹窗样式 */
    .signup-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        justify-content: center;
        align-items: center;
    }

    .signup-modal.active {
        display: flex;
    }

    .signup-form {
        background: #fff;
        padding: 2rem;
        border-radius: 10px;
        width: 90%;
        max-width: 500px;
        position: relative;
    }

    .signup-form h3 {
        margin-bottom: 1.5rem;
        color: #333;
        text-align: center;
    }

    .form-group {
        margin-bottom: 1rem;
    }

    .form-group label {
        display: block;
        margin-bottom: 0.5rem;
        color: #666;
    }

    .form-group input {
        width: 100%;
        padding: 0.8rem;
        border: 1px solid #ddd;
        border-radius: 5px;
        font-size: 1rem;
    }

    .form-group input:focus {
        border-color: #2ecc71;
        outline: none;
    }

    .close-modal {
        position: absolute;
        top: 1rem;
        right: 1rem;
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: #666;
    }

    .submit-btn {
        background: #2ecc71;
        color: #fff;
        padding: 0.8rem 2rem;
        border: none;
        border-radius: 25px;
        width: 100%;
        font-size: 1rem;
        cursor: pointer;
        transition: background 0.3s ease;
    }

    .submit-btn:hover {
        background: #27ae60;
    }

    .events-hero {
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('assets/imgs/events-bg.jpg') no-repeat center center;
        background-size: cover;
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: #fff;
        margin-top: 80px;
    }

    .events-hero h1 {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }

    .events-list {
        padding: 4rem 5%;
    }

    .events-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
        margin-top: 2rem;
    }

    .event-card {
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .event-image {
        position: relative;
        height: 200px;
    }

    .event-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .event-date {
        position: absolute;
        top: 10px;
        right: 10px;
        background: #2ecc71;
        color: #fff;
        padding: 0.5rem;
        border-radius: 5px;
        text-align: center;
    }

    .event-date .day {
        font-size: 1.5rem;
        font-weight: bold;
        display: block;
    }

    .event-content {
        padding: 1.5rem;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .event-content h3 {
        margin-bottom: 1rem;
        color: #333;
    }

    .event-time,
    .event-location {
        color: #666;
        margin-bottom: 0.5rem;
    }

    .event-description {
        color: #666;
        margin: 1rem 0;
        flex-grow: 1;
    }

    .event-button {
        display: inline-block;
        background: #2ecc71;
        color: #fff;
        padding: 0.8rem 2rem;
        border-radius: 25px;
        text-decoration: none;
        transition: background 0.3s ease;
        text-align: center;
        margin-top: auto;
    }

    .event-button:hover {
        background: #27ae60;
    }

    @media (max-width: 768px) {
        .events-hero {
            height: 200px;
        }

        .events-hero h1 {
            font-size: 2rem;
        }

        .events-list {
            padding: 2rem 5%;
        }
    }

    /* 成功提示样式 */
    .success-message {
        position: fixed;
        top: 10%;
        right: -100%;
        background: rgba(46, 204, 113, 0.95);
        color: white;
        padding: 15px 30px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        display: flex;
        align-items: center;
        opacity: 0;
        transition: all 0.5s ease;
        z-index: 2000;
    }

    .success-message.show {
        opacity: 1;
        right: 20px;
    }

    .success-text {
        font-size: 16px;
        font-weight: 500;
    }
</style>